<template>
  <div id="app">
    <el-container>
      <el-header style="background-color: #2d3d58">
        <Header />
      </el-header>
      <el-container>
        <el-aside >
          <LeftTree />
        </el-aside>
        <el-container>
          <el-main>
            <!--二级路由出口-->
            <router-view />
            <!-- <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane
                                    v-for="(item, index) in editableTabs"
                                    :key="item.name"
                                    :label="item.title"
                                    :name="item.name"
                            >
                            <iframe :src="item.url" width="100%" height="400px;" frameborder="0"></iframe>
                            </el-tab-pane>
                        </el-tabs> -->
          </el-main>
          <el-footer style="background-color: #282828">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<!--js-->
<script>
//引入header
import Header from "../components/Header.vue";
//引入leftTree
import LeftTree from "../components/LeftTree.vue";
export default {
  props: {
    //父子组件传递参数，定义参数类型
  },
  data() {
    //该页面用的所有属性
    return {
      //和页签页有关属性开始
      // editableTabsValue: '1',
      // editableTabs: [{
      //     title: '默认页',
      //     name: '1',
      //    // content: 'Tab 1111111111111 content'
      //     url:'https://echarts.apache.org/zh/index.html'
      // } ],
      // tabIndex: 1,
      //和页签页有关属性结束
    };
  },
  created: function () {
    //默认页
    //this.$router.push("/dept");
  },
  methods: {
    //方法
    //添加页签
    // addTab(targetName,url) {
    //     let newTabName = ++this.tabIndex + '';//让tabIndex加1
    //     //获取所有的标签页
    //     let tabs = this.editableTabs;
    //     //定义是否已经标签变量
    //     var  isHaveTab = false;
    //    //循环所有页签页
    //     tabs.forEach((tab, index) => {
    //         //如果为true 说明当前点击节点（部门管理），已经存在标签页
    //         if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
    //             isHaveTab = true;
    //             newTabName =tab.name;
    //         }
    //     });
    //     //isHaveTab  集合中没有的时候，添加
    //    if(!isHaveTab) {
    //        this.editableTabs.push({//向数组中添加数据
    //            title: targetName,
    //            name: newTabName,
    //            url: url
    //        });
    //    }
    //     //让它高亮
    //     this.editableTabsValue = newTabName;
    // },
    // //删除页签
    // removeTab(targetName) {
    //     let tabs = this.editableTabs;
    //     let activeName = this.editableTabsValue;
    //     if (activeName === targetName) {
    //         tabs.forEach((tab, index) => {
    //             if (tab.name === targetName) {
    //                 let nextTab = tabs[index + 1] || tabs[index - 1];
    //                 if (nextTab) {
    //                     activeName = nextTab.name;
    //                 }
    //             }
    //         });
    //     }
    //     this.editableTabsValue = activeName;
    //     this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    // }
  },
  //组件注册
  components: {
    Header,
    LeftTree,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--样式-->
<style>
.el-header,
.el-footer {
  background-color: #282828;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #4a6c8c;
  color: #333;
  text-align: center;
  line-height: 36px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 36px;
}
body > .el-container {
  margin-bottom: 40px;
}
html,body,#app {
  height:100%;
}
</style>
